<template>
  <div id='mine' v-if="!loading">
    <!-- 用户 -->
    <div class="user">
      <!-- 头像 -->
      <div class="userUrl">
        <img :src="userInfo.avatarUrl" alt="">
      </div>
      <!-- 名字 -->
      <div class="userName rowShows">{{ userInfo.nickname }}</div>
      <!-- 基本信息 -->
      <div class="userInfo">
        <span>{{ userInfo.follows }}</span>关注
        <span>{{ userInfo.followeds }}</span>粉丝
      </div>
    </div>

    <!-- 我的歌单 -->
    <div class="myPlaylist">
      <h3>创建的歌单</h3>
      <div class="playlist">
        <router-link  :to="`/more/${item.id}`" class="item" v-for="item in userPlaylist" :key="item.id" tag="div">
          <img :src="item.coverImgUrl" alt="">
          <div>
            <span class="rowShows">{{ item.name }}</span>
            <span class="rowShows">{{ item.trackCount }}首</span>
          </div>
        </router-link >
      </div>
    </div>

    <!-- 收藏的歌单 -->
    <div class="collectPlaylist">
      <h3>收藏的歌单</h3>
      <div class="playlist">
        <router-link 
          :to="`/more/${item.id}`"
          class="item" 
          v-for="item in userCollectPlaylist" 
          :key="item.id" 
          tag="div"
        >
          <img :src="item.coverImgUrl" alt="">
          <div>
            <span class="rowShows">{{ item.name }}</span>
            <span class="rowShows">{{ item.trackCount }}首</span>
          </div>
        </router-link >
      </div>
    </div>
  </div>

  <div v-else>
    <Loading></Loading>
  </div>
</template>

<script>
import Loading from '@/views/loading/Loading.vue'

export default {
  data () {
    return {
      loading: true,
      // 用户信息
      userInfo: {},
      // 用户创建的歌单
      userPlaylist: [],
      // 用户收藏的歌单
      userCollectPlaylist: []
    }
  },
  components: {
    Loading
  },
  // 获取token的数据
  props: ['userId'],
  created () {
    this.loading = true

    // 获取用户信息
    this.$api.getUser(this.userId).then(res => {
      // console.log(res);
      this.userInfo = res.profile
    })

    // 获取用户歌单
    this.$api.getUserPlaylist(this.userId).then(res => {
      // 循环判断出每个歌单是收藏的还是创建的
      res.playlist.forEach(item => {
        // 如果歌单的作者是自己的化，就说明是自己创建的
        if (item.creator.userId == this.userId) {
          this.userPlaylist.push(item)
          return
        }
        this.userCollectPlaylist.push(item)
        this.loading = false
      });
    })
  }
}
</script>

<style lang='less'>
// 用户
.user {
  width: 100vw;
  text-align: center;
  margin-bottom: 15px;

  // 用户头像
  .userUrl {
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    background-color: #cddddd;
    margin: 10vw auto 10px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  // 用户名字
  .userName {
    width: 100vw;
    font-size: 4vw;
    margin-bottom: 10px;
  }

  // 用户信息
  .userInfo {
    font-size: 3vw;

    span:last-child {
      margin-left: 10px;
    }
  }
}

// 歌单
.myPlaylist,
.collectPlaylist {
  width: calc(100vw - 40px);
  margin: 0 auto;
  padding: 2vw 0;
  border-radius: 10px;
  background-color: #efefef;
  margin-bottom: 5vw;

  h3 {
    margin: 0 2vw 2vw;
    font-size: 2vw;
    color: #666;
  }
}

// 歌单
.playlist {
  display: flex;
  // justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 0 2vw;

  .item {
    width: 100%;
    display: flex;
    margin-bottom: 2vw;

    img {
      width: 12vw;
      height: 12vw;
      background-color: #fff;
      margin-right: 3vw;
      border-radius: 2vw;
    }

    > div {
      width: calc(100% - 14vw);
      height: 12vw;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      span {
        display: block;
        width: 100%;
      }

      span:nth-child(1) {
        font-size: 3vw;
        color: #363636;
      }

      span:nth-child(2) {
        font-size: 2vw;
        color: #999;
      }
    }
  }
}
</style>
